<template>
  <el-card class="student-card">
    <el-row type="flex" justify="space-between">
      <!-- 表单筛选区域 -->
      <el-form :inline="true" label-width="80px" size="normal">
        <el-form-item>
          <el-input
            size="small"
            v-model="queryData.student_name"
            placeholder="学员姓名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryData.subject_id"
            size="small"
            placeholder="归属学科"
            @change="subChange"
          >
            <el-option
              v-for="(item, index) in subjectList"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryData.class_id"
            size="small"
            placeholder="归属班级"
          >
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.class_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryData.student_state"
            size="small"
            placeholder="账号状态"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="searchOk" plain
            >搜索</el-button
          >
          <el-button size="mini" @click="searchCancel" plain>重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 操作区域 -->
      <div>
        <el-button size="small" type="warning" plain @click="btnImport"
          >批量导入</el-button
        >
        <el-button size="small" type="primary" plain @click="btnAdd"
          >增加学员</el-button
        >
      </div>
    </el-row>
    <br />
    <!-- 批量操作区域 -->
    <el-row v-if="piLiangShow" style="margin-bottom: 20px">
      <el-button size="small" type="success" @click="batchEnable"
        >批量启用</el-button
      >
      <el-button size="small" type="warning" @click="disableRow"
        >批量禁用</el-button
      >
      <el-button size="small" type="danger" @click="deleteRow"
        >批量删除</el-button
      >
    </el-row>
    <!-- 表格区域 -->
    <el-table
      :data="list"
      border
      stripe
      @selection-change="selectionChange"
      select-all="selectAll"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column
        type="index"
        width="50"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
      width="70"
        prop="student_name"
        label="学生姓名"
        align="center"
      ></el-table-column>
      <el-table-column
      width="110"
        prop="student_phone"
        label="手机号"
        align="center"
      ></el-table-column>
      <el-table-column
      width="90"
        prop="class_name"
        label="班级名称"
        align="center"
      ></el-table-column>
      <el-table-column
        width="140"
        prop="subject_name"
        label="学科名称"
        align="center"
      ></el-table-column>
      <el-table-column prop="student_sex" label="性别" width="90" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.student_sex == 1">男</span>
          <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column prop="student_state" label="状态" align="center">
        <template slot-scope="{ row }">
          <el-tag v-if="row.student_state == 1" type="success">待审核</el-tag>
          <el-tag v-else-if="row.student_state == 2" type="warning"
            >正常</el-tag
          >
          <el-tag v-else-if="row.student_state == 3" type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="创建人" align="center">
      </el-table-column>
      <el-table-column
        prop="created_at"
        width="160"
        label="创建时间"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="editRow(row.id)"
          ></el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delRow(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      @size-change="SizeChange"
      @current-change="CurrentChange"
      :current-page="queryData.page"
      :page-sizes="[10, 15, 20]"
      :page-size="queryData.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
    >
    </el-pagination>
    <!-- 弹窗组件 -->
    <addStudent ref="addStudent" @updateList="initData"></addStudent>
    <!-- 批量导入组件 -->
    <uploadExcel ref="uploadExcel" />
  </el-card>
</template>

<script>
import addStudent from "./components/addStudent.vue";
import uploadExcel from "./components/uploadExcel.vue";
import {
  getStudentListApi,
  delStudentApi,
  getSubjectInfoAPi,
  getClassInfoApi,
  getStudentApi,
  getChangeStatusApi,
} from "@/api/student";
export default {
  name: "Student",

  data() {
    return {
      list: [],
      piLiangShow: false,
      subjectList: [], //归属学科下拉数据
      classList: [], //归属班级下拉数据
      ids: [],
      values: "",
      options: [
        {
          value: 1,
          label: "待审核",
        },
        {
          value: 2,
          label: "正常",
        },
        {
          value: 3,
          label: "禁用",
        },
      ],
      dialogShow: false,
      queryData: {
        student_name: "",
        subject_id: "",
        class_id: "",
        student_state: "",
        page: 1,
        limit: 10,
      },
      total: 0,
    };
  },
  components: {
    addStudent,
    uploadExcel,
  },
  created() {
    this.initData();
    this.getSbujectList();
  },

  methods: {
    //请求所有数据
    async initData() {
      let { list, total } = await getStudentListApi(this.queryData);
      this.list = list;
      this.total = total;
    },
    // 获取归属学科下拉数据
    async getSbujectList() {
      let res = await getSubjectInfoAPi({
        page: 1,
        limit: 1000,
      });
      this.subjectList = res;
    },

    // 获取归属班级下拉数据
    async subChange() {
      let { list } = await getClassInfoApi({
        page: 1,
        limit: 100,
        subject_id: this.queryData.subject_id,
      });
      this.classList = list;
    },
    // 监听每页条数切换
    SizeChange(val) {
      this.queryData.limit = val;
      this.initData();
    },
    // 监听页码切换
    CurrentChange(val) {
      this.queryData.page = val;
      this.initData();
    },
    // 搜索提交功能
    searchOk() {
      this.queryData.page = 1;
      this.initData();
    },
    // 重置功能
    searchCancel() {
      this.queryData.page = 1;
      this.queryData.student_name = "";
      this.queryData.student_state = "";
      this.queryData.class_id = "";
      this.queryData.subject_id = "";
      this.initData();
    },
    // 批量导入按钮
    btnImport() {},
    // 增加学员按钮
    btnAdd() {
      this.$refs.addStudent.dialogShow = true;
    },
    // !编辑按钮 数据回显
    async editRow(id) {
      let res = await getStudentApi(id);
      this.$refs.addStudent.formData = res;
      // this.$refs.addStudent.changeSubject(res.subject_id);
      this.$refs.addStudent.dialogShow = true;
    },
    // 当表格选择项发生变化时会触发事件
    selectionChange(selection) {
      this.piLiangShow = true;
      this.ids = selection.map((item) => item.id);
      if (selection.length === 0) {
        this.piLiangShow = false;
      }
    },
    // 删除行数据
    async delRow(id) {
      try {
        await this.$confirm("确认删除吗？");
      } catch (error) {
        return console.log(error);
      }
      await delStudentApi({
        id: [id],
      });
      this.$message.success("删除成功");
      if (this.queryData.page !== 1 && this.list.length === 1) {
        this.queryData.page--;
      }
      this.initData();
    },
    // 批量删除
    async deleteRow() {
      try {
        await this.$confirm("确定要批量删除吗？");
      } catch (error) {
        return console.log(error);
      }
      await delStudentApi({
        id: this.ids,
      });
      this.$message.success("删除成功");
      this.initData();
    },
    // 批量启用
    async batchEnable() {
      try {
        await this.$confirm("确定要批量启用数据吗？");
      } catch (error) {
        return console.log(error);
      }
      await getChangeStatusApi({
        id: this.ids,
        status: 2,
      });
      this.initData();
    },
    // 批量禁用
    async disableRow() {
      try {
        await this.$confirm("确定要批量禁用数据吗？");
      } catch (error) {
        return console.log(error);
      }
      await getChangeStatusApi({
        id: this.ids,
        status: 3,
      });
      this.initData();
    },

    // 批量导入按钮
    btnImport() {
      this.$refs.uploadExcel.uploadShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.student-card {
  margin: 10px;
}
</style>

